function unlock() {
    this.callSuper();
    this.configuration = {
        "i18n": "nls/unlock",
        "apis": "../../config/apis/unlock"
    };
    this._viewIndex = "unlock";

    // keyNames from global config
    // use for getting customerData from setter
    this.isBrowser = false;

    // customer data
    this.account = "";
    this.location = "";
    this.secureToken = "";
    // number of LaiSees pending unlock from server
    this.numOfLaiSees = 0;

    // for longPress event
    this.currentPage = 0;
    this.laiSeeCoords = "";
    this.isLongPressRegistered = false;
}
//Dave
function getUrlValueByName(paramName){
    var paramValue="";
    var urlthis=location.href;
    urlthis=urlthis.substring(urlthis.indexOf('?')+1,urlthis.length);
    var arr=urlthis.split('&');
    if(arr!=null){
        for(var i=0;i<arr.length;i++){
            var parmNameValue=arr[i].split('=');
            if(parmNameValue!=null&&parmNameValue.length==2){
                if(parmNameValue[0]==paramName){
                    paramValue=parmNameValue[1];
                    break;
                }
            }
        }
    }
    return paramValue;
}
unlock.prototype.unlockHasParsed = function() {
    var self = this;

    // event binding
    iData.get("btnMenu").click(function() {
        self.unregisterLongPressListener(function() {
            self.goTo("file:///web/postlogon/menu/menu.html?state="+getUrlValueByName('state'), true);
        });
    });
    iData.get("btnDashboard").click(function() {
        self.unregisterLongPressListener(function() {
            self.goTo("file:///web/postlogon/dashboard/dashboard.html?state="+getUrlValueByName('state'), true);
        });
    });
    iData.get("btnShake").click(function() {
        self.unregisterLongPressListener(function() {
            self.goTo("file:///web/postlogon/deliver/deliver.html?state="+getUrlValueByName('state'), true);
        });
    });

    // footer buttons
    iData.get("unlockAll").click(function() {
        if (self.numOfLaiSees > 0) {
            iData.get("unlockAllPopup").removeClass("hidden");
            // to fix the long press event trigger in unlock all popup
            if (self.isLongPressRegistered) {
                self.unregisterLongPressListener(function() {
                    self.isLongPressRegistered = false;
                });
            }
        }
    });
    iData.get("btnUnlockAll").click(function() {
        self.unlockAll();
    });
    iData.get("btnCancel").click(function() {
        iData.get("unlockAllPopup").addClass("hidden");
        // update the listener
        self.updateLongPressListener();
    });

    // get customerData from local db
    self.getCustomerInfo(self.getCustomerInfoCallback);
};

unlock.prototype.getCustomerInfoCallback = function(customerData) {
    var self = this,
        keyNames = self.getCustomerInfoKeys();

    if (self.isBrowser) {
        customerData = {"account": "12345678", "fullName": "Nick X L AO", "secureToken": "411768490e203d7171fcd0047754c88454485b74de6863edab12bc043ea3e58", "location": "CN"};
    }

    // save customer data in variables
    self.account = customerData[keyNames.account];
    self.location = customerData[keyNames.location];
    self.secureToken = customerData[keyNames.secureToken];
    // get locked bonus list from server
    self.getLockedBonus();
};

unlock.prototype.getLockedBonus = function() {
    var self = this;

    // send request to get the LaiSees' list
    self.request({
        name: "getLockedBonus",
        method: "POST",
        data: self.getLockedBonusRequestParam,
        callback: self.getLockedBonusCallback
    });
};

unlock.prototype.getLockedBonusRequestParam = function() {
    var self = this;

    return {
        account: self.account,
        secureToken: self.secureToken
    };
};

unlock.prototype.getLockedBonusCallback = function() {
    var self = this;

    return {
        "success": function(respData) {
            var data = respData.data,
                body = data.body;

            self.updateLaiSeesList(body);
        },
        "error": function(respData) {
            // DO NOTHING
        }
    };
};

unlock.prototype.updateLaiSeesList = function(gameResult) {
    var self = this,
        _i18n = iData.get("i18n"),
        leftMargin = window.innerWidth * 0.2,
        lockedBonusList = gameResult.lockedBonusList,
        length = lockedBonusList ? lockedBonusList.length : 0,
        lockedBonus,
        laiSeesHTML = "";

    for (var i = 0; i < length; i++) {
        lockedBonus = lockedBonusList[i];
        laiSeesHTML += i === 0 ?
            '<div class="laiSee" style="margin-left: ' + leftMargin + 'px;">' :
            '<div class="laiSee">';
        laiSeesHTML = laiSeesHTML +
                    '<div class="bg-nameCard">' +
                        '<div class="nameCard" style="line-height: 23px;margin-bottom: 10px;" bonusid="' + lockedBonus.bonusId + '">' +
                            '<span style="font-size: 18px;color: #8bc53f">' + lockedBonus.staffName + '</span><br />' +
                            '<span style="font-size: 14px;">' + lockedBonus.account + '</span>' +
                        '</div>' +
                    '</div>' +
                '<div class="bg-laiSee">' +
//                    '<div class="bg-nameCard">' +
//                        '<div class="nameCard" bonusid="' + lockedBonus.bonusId + '">' +
//                            '<span>' + lockedBonus.staffName + '</span><br />' +
//                            '<span>' + lockedBonus.account + '</span>' +
//                        '</div>' +
//                    '</div>' +
                '</div>' +
                '<div class="instruction hidden">' +
                    '<span class="ui-darkRedSpan">' + _i18n.pressHold + '</span><br />' +
                    '<span class="ui-greySpan">' + _i18n.toUnlock + '</span>' +
                '</div>' +
            '</div>';
    }
    iData.get("laiSeesScroller").html(laiSeesHTML);
    //Dave
    if(self.isBrowser){
        $('.bg-laiSee').click(function(obj) {
            if($(this).hasClass('unlock')){
                return false;
            }
            self.unlockBonus();
        });
    }
    self.numOfLaiSees = length;
    self.updatePendingDesc();
    // setWidth for iScroll plugin
    self.setWidth();
};

unlock.prototype.updatePendingDesc = function() {
    var self = this,
        _i18n = iData.get("i18n"),
        numOfLaiSees = self.numOfLaiSees,
        pendingHTML = "";

    pendingHTML = numOfLaiSees + " " + (numOfLaiSees < 2 ? _i18n.bigLaiSee : _i18n.bigLaiSees);
    iData.get("pendingAmount").text(pendingHTML);
};

unlock.prototype.setWidth = function() {
    var self = this,
        $laiSeesScroller = iData.get("laiSeesScroller"),
        numOfLaiSees = self.numOfLaiSees,
        indicatorHTML = "",
        clientWidth = window.innerWidth;

    // init indicators
    for (var i = 0; i < numOfLaiSees; i++) {
        indicatorHTML += "<div>" + (i + 1) + "</div>";
    }
    iData.get("indicator").html(indicatorHTML);
    iData.get("indicator").children("div:eq(0)").addClass("active");

    // layout: wrapper and scroller width
    iData.get("laiSeesScroller")
        .width(clientWidth + (clientWidth * 0.6 * (numOfLaiSees - 1)))
        .children("div").width(clientWidth * 0.6);

    // init iScroll plugin
    unlockIScrollPluginInit.setTarget(self);
    unlockIScrollPluginInit.begin();

    // save the laiSee's coordinate
    self.laiSeeCoords = self.getLaiSeeCoords();
    // and update the long press listener
    self.updateLongPressListener();
};

unlock.prototype.getLaiSeeCoords = function() {
    var self = this,
        $laiSee = iData.get("laiSeesScroller").children("div::eq(0)"),
        laiSeeOffset = $laiSee.offset(),
        halfLaiSeeWidth = $laiSee.width() / 2,
        halfWindowWidth = window.innerWidth / 2,
        devicePixelRatio = window.devicePixelRatio;

    return JSON.stringify({
        topleft_x: (halfWindowWidth - 81) * devicePixelRatio,
        topleft_y: (laiSeeOffset.top + 11) * devicePixelRatio,
        bottomright_x: (halfWindowWidth + 80) * devicePixelRatio,
        bottomright_y: (laiSeeOffset.top + 236) * devicePixelRatio
    });
};

unlock.prototype.updateLongPressListener = function(callback) {
    var self = this,
        currentPage = self.currentPage,
        isLongPressRegistered = self.isLongPressRegistered,
        $laiSeesScroller = iData.get("laiSeesScroller"),
        $laiSee = $laiSeesScroller.children("div:eq(" + currentPage + ")").find(".bg-laiSee");

    if (!(isLongPressRegistered || $laiSee.hasClass("unlock"))) {
        self.registerLongPressListener(self.laiSeeCoords, self.unlockBonus, function() {
            self.isLongPressRegistered = true;
        });
    } else if ($laiSee.hasClass("unlock") && isLongPressRegistered) {
        self.unregisterLongPressListener(function() {
            self.isLongPressRegistered = false;
        });
    }

    // add callback handling
    if (callback && $.isFunction(callback)) {
        callback.call(self);
    }
};
    //Dave
    function timerOutUnlock(timesval){
        if(timesval==3){
            $('#timer_unlock_div').removeClass("timer_unlock_divcss2");
            $('#timer_unlock_div').removeClass("timer_unlock_divcss1");
            $('#timer_unlock_div').addClass("timer_unlock_divcss3");
        }else if(timesval==2){
            $('#timer_unlock_div').removeClass("timer_unlock_divcss3");
            $('#timer_unlock_div').removeClass("timer_unlock_divcss1");
            $('#timer_unlock_div').addClass("timer_unlock_divcss2");
        }else if(timesval==1){
            $('#timer_unlock_div').removeClass("timer_unlock_divcss3");
            $('#timer_unlock_div').removeClass("timer_unlock_divcss2");
            $('#timer_unlock_div').addClass("timer_unlock_divcss1");
        }else if(timesval==0){
            $('#timer_unlock_div').removeClass("timer_unlock_divcss1");
            $('#timer_unlock_div').removeClass("timer_unlock_divcss2");
            $('#timer_unlock_div').addClass("timer_unlock_divcss3");
            $('#timer_unlock_div').hide();
        }

        timesval--;
        if(timesval<0){
            self.request({
                name: "unlockBonus",
                method: "POST",
                data: self.unlockBonusRequestParam,
                callback: self.unlockBonusCallback
            });
            return true;
        }
        setTimeout("timerOutUnlock("+timesval+");",1000);
    }
unlock.prototype.unlockBonus = function() {
    var self = this;
    $('#timer_unlock_div').show();
    timerOutUnlock(3);
};
//Dave end
unlock.prototype.unlockBonusRequestParam = function() {
    var self = this,
        currentPage = self.currentPage,
        $laiSeesScroller = iData.get("laiSeesScroller"),
        $nameCard = $laiSeesScroller.children("div:eq(" + currentPage + ")").find(".nameCard"),
        bonusId = $nameCard.attr("bonusid");

    return {
        account: self.account,
        secureToken: self.secureToken,
        bonusId: bonusId
    };
};

unlock.prototype.unlockBonusCallback = function() {
    var self = this;

    return {
        "success": function(respData) {
            var currentPage = self.currentPage,
                $laiSeesScroller = iData.get("laiSeesScroller"),
                $laiSee = $laiSeesScroller.children("div:eq(" + currentPage + ")").find(".bg-laiSee");

            // update the unlock icon
            $laiSee.addClass("unlock");
            self.numOfLaiSees--;
            self.updateUnlockInstruction();
            self.updatePendingDesc();
            // unRegisterLongPressListener
            self.updateLongPressListener();
        },
        "error": function(respData) {
            // DO NOTHING
        }
    };
};

unlock.prototype.unlockAll = function() {
    var self = this;

    self.request({
        name: "unlockAllBonus",
        method: "POST",
        data: self.unlockAllRequestParam,
        callback: self.unlockAllCallback
    });
};

unlock.prototype.unlockAllRequestParam = function() {
    var self = this;

    return {
        account: self.account,
        secureToken: self.secureToken
    };
};

unlock.prototype.unlockAllCallback = function() {
    var self = this;

    return {
        "success": function(respData) {
            var $laiSeesScroller = iData.get("laiSeesScroller"),
                $laiSees = $laiSeesScroller.find(".bg-laiSee");

            // update lock icon to unlock icon
            $laiSees.addClass("unlock");
            iData.get("unlockAllPopup").addClass("hidden");
            // clear the number of pending lock laiSees
            self.numOfLaiSees = 0;
            self.updateUnlockInstruction();
            self.updatePendingDesc();
            // unRegisterLongPressListener
            self.updateLongPressListener();
        },
        "error": function(respData) {
            // DO NOTHING
        }
    };
};

unlock.prototype.updateUnlockInstruction = function() {
    var self = this,
        $laiSeesScroller = iData.get("laiSeesScroller"),
        $laiSees = $laiSeesScroller.find(".bg-laiSee"),
        $laiSee = null, $instruction = null;

    $.each($laiSees, function(index, element) {
        $laiSee = $(element);
        $instruction = $laiSee.next(".instruction");
        if ($laiSee.hasClass("unlock")) {
            $instruction.html("<span class=\"ui-darkRedSpan\">" + iData.get("i18n").unlocked + "</span>");
        }
    });
};

// iScroll plugin for the record list
var unlockIScrollPluginInit = {
    self: null,
    myScroll: null,
    setTarget: function(obj) {
        self = obj;
    },
    begin: function() {
        unlockIScrollPluginInit.myScroll = new iScroll("laiSeesWrapper", {
            // Nick added touchMove option start
            // false to disable div moving when finger moves
            touchMove: false,
            // Nick added touchMove option end
            snap: true,
            momentum: false,
            checkDOMChanges: true,
            hScrollbar: false,
            vScrollbar: false,
            vScroll: false,
            useTransition: true,
            onRefresh: function() {
                // reset the wrapper with to 60% of the client width
                this.wrapperW = window.innerWidth * 0.6;
                // reset the maxScrollX according to the number of LaiSees
                this.maxScrollX = -this.wrapperW * (self.numOfLaiSees - 1);
                // update the status of the indicators
                iData.get("indicator").children("div.active").removeClass("active");
                iData.get("indicator").children("div:eq(0)").addClass("active");
                // update wording display
                $("div.instruction:not(.hidden)").addClass("hidden");
                $("div.instruction").eq(0).removeClass("hidden");
            },
            onScrollEnd: function() {
                iData.get("indicator").children("div.active").removeClass("active");
                iData.get("indicator").children("div:nth-child(" + (this.currPageX + 1) + ")").addClass("active");
                // update wording display
                $("div.instruction:not(.hidden)").addClass("hidden");
                $("div.instruction").eq(this.currPageX).removeClass("hidden");
                // update the long press listener
                self.currentPage = this.currPageX;
                self.updateLongPressListener();
            }
        });
    }
};

unlock.prototype.buildModel = function() {
    var self = this,
        GLOBAL_CONFIG = self.configuration.settings;

    // for browser mode
    self.isBrowser = GLOBAL_CONFIG.isBrowser;

    iData.add({
        // nav buttons
        "btnMenu": $("#btnMenu"),
        "btnDashboard": $("#btnDashboard"),
        "btnShake": $("#btnShake"),
        // iScroll
        "indicator": $("#indicator"),
        "laiSeesWrapper": $("#laiSeesWrapper"),
        "laiSeesScroller": $("#laiSeesScroller"),
        // footer
        "pendingAmount": $("#pendingAmount"),
        "unlockAll": $("#unlockAll"),
        "unlockAllPopup": $("#unlockAll_popup"),
        "btnUnlockAll": $("#btnUnlockAll"),
        "btnCancel": $("#btnCancel")
    });
};

unlock.superclass = iFunction;
unlock.start = function() {
    return new unlock();
};
iClass(unlock);